<template>
	<view class="tabbar-boxs">
	<view class="cu-bar tabbar bg-black footer-menu">
		<view :class="setting.activePath=='/manage/index/manager'?'text-green':'text-gray'"
			@click="handleRouter('/manage/index/manager')" class="action ">
			<view class="cuIcon-homefill"></view> 首页
		</view>
		<view :class="setting.activePath=='/manage/message/index'?'text-green':'text-gray'"
			@click="handleRouter('/manage/message/index')" class="action ">
			<view class="cuIcon-noticefill"></view> 消息
		</view>
		<view :class="setting.activePath=='/manage/order/orderlist'?'text-green':'text-gray'"
			@click="handleRouter('/manage/order/orderlist')" class="action  add-action">
			<button class="cu-btn cuIcon-order bg-green shadow"></button>
			订单
		</view>
		<view :class="setting.activePath=='/manage/statistics/statistics'?'text-green':'text-gray'"
			@click="handleRouter('/manage/statistics/statistics')" class="action ">
			<view class="cuIcon-selectionfill"></view> 统计
		</view>
		<view :class="setting.activePath=='/manage/usercenter'?'text-green':'text-gray'"
			@click="handleRouter('/manage/usercenter')" class="action ">
			<view class="cuIcon-my">
				<view class="cu-tag badge"></view>
			</view>
			我的
		</view>
	</view>
	</view>
</template>

<script setup lang="ts">
	import { useSettingStore } from '@/stores/index';
	import { ref, watch } from 'vue';
	const setting = useSettingStore();
	const emit = defineEmits(['action', 'load']);
	const props = defineProps({
		list: {
			default: () => {
				return [
					{
						id: '0',
						name: '',
						children: []
					}
				];
			}
		},
		value: {
			type: Number,
			default: 0
		}
	});

	const active = ref(props.value);
	const menusList : any = ref([]);
	watch(
		() => props.value,
		(newValue, oldValue) => {
			active.value = newValue;
		}
	);
	const handleRouter = (path : any) => {
		setting.activePath = path
		uni.redirectTo({
			url: path
		});
	}
</script>

<style lang="scss" scoped>
	.footer-menu {
		z-index: 10;
	}
	.tabbar-boxs{
		height: 120rpx;
	}
</style>